<template>
  <view>
    <view class="goods-ul">
      <block v-for="(item, index) in goods_list" :key="index">
        <view class="goods-li clearfix" @click="selGoods(item)">
          <view class="del-icon">
            <u-icon
              size="40"
              name="minus-circle-fill"
              :color="
                sel_goods_list.findIndex(
                  (goods) => item.skuId === goods.skuId
                ) > -1
                  ? '#fb5904'
                  : '#999999'
              "
            ></u-icon>
          </view>
          <view class="goods-name ellipsis">{{ item.goodsName }}</view>
          <view class="goods-code">{{ item.goodsCode }}</view>
          <view class="goods-num clearfix">
            <view class="float_left"
              >{{ item.unitName }};{{ item.skuName }}</view
            >
            <text class="float_right"
              >可退：{{ $utils.formatNub(item.returnOnNum)
              }}{{ item.unitName }}</text
            >
          </view>
          <view class="goods-num clearfix">
            <view class="float_left">
              <text class="price">{{
                $utils.formattedNumber(item.buyerUnitPrice)
              }}</text>
            </view>
            <view class="float_right">
              小计：
              <text class="price">{{
                $utils.formattedNumber(item.subtotalPrice)
              }}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="confirm-btn" @click="confirm">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_list: [],
      sel_goods_skuid: [],
      sel_goods_list: [],
    };
  },
  onLoad() {
    const obj = uni.getStorageSync("purchaseGoods");
    console.log(obj);
    this.goods_list = obj.goodsArrData;
    this.sel_goods_list = obj.goods_list;
  },
  methods: {
    confirm() {
      // 选择返回上一页
      this._prePage().purchaseGoodsData = this.sel_goods_list;
      uni.navigateBack();
    },
    selGoods(item) {
      if (this.sel_goods_list.length === 1) {
        this.$u.toast("至少保留一条数据");
        return;
      }
      const index = this.sel_goods_list.findIndex(
        (godos) => item.skuId === goods.skuId
      );
      if (index > -1) {
        this.sel_goods_list.splice(index, 1);
      } else {
        this.sel_goods_list.push({
          id: item.id,
          goodsId: item.basicGoodsId,
          goodsCode: item.goodsCode,
          goodsName: item.goodsName,
          unitName: item.unitName,
          skuName: item.skuName,
          skuId: item.skuId,
          purchaseNum: this.$utils.formatNub(item.buyerNum),
          buyerNum: this.$utils.formatNub(item.returnOnNum),
          inNum: item.inNum,
          inOfNum: item.inOfNum,
          returnOnNum: item.returnOnNum,
          returnNum: item.returnNum,
          inventoryNum: this.$utils.formatNub(item.num),
          buyerUnitPrice: this.$utils.formatNub(item.buyerUnitPrice),
          subtotalPrice: this.$utils.formatNub(item.subtotalPrice),
          couponAmount: this.$utils.formatNub(item.couponAmount),
          otherAmount: this.$utils.formatNub(item.otherAmount),
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.confirm-btn {
  color: #ffffff;
  background-color: $uni-color-primary;
  text-align: center;
  line-height: 90rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.goods-ul {
  .goods-li {
    line-height: 32rpx;
    position: relative;
    background-color: #ffffff;
    width: 710rpx;
    margin: 20rpx auto;
    padding: 20rpx;
    border-radius: 10rpx;
    padding-left: 80rpx;
    position: relative;
    .del-icon {
      position: absolute;
      top: 50%;
      left: 20rpx;
      transform: translateY(-50%);
    }
    .goods-name {
      width: 640rpx;
      height: 34rpx;
      line-height: 34rpx;
    }
    .goods-code {
      font-size: 24rpx;
      padding-top: 10rpx;
    }
    .goods-num {
      padding-top: 10rpx;
      font-size: 24rpx;
      .float_left {
        input {
          display: inline-block;
          border: 1px solid #eeeeee;
          border-radius: 10rpx;
          padding: 0 10rpx;
          vertical-align: middle;
          text-align: center;
        }
      }
      .price {
        font-size: 28rpx;
        font-weight: bold;
        color: $uni-color-error;
      }
    }
  }
}
</style>
